<template>
	<g-page :is-tabbar="true">
		<view class="wrap">
			<view class="sear" style="position: fixed; z-index: 2;">
				<u-search placeholder="搜索" shape="square" :animation="'false'" v-model="search"></u-search>
			</view>
			<view class="sear"></view>
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="waterbox"  v-for="(item, index) in leftList" :key="index">
						<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
						<u-lazy-load threshold="-450" border-radius="0" :image="item.issue_imags" :index="index">
						</u-lazy-load>
						<view class="content">
							{{item.content}}
						</view>
						<view class="user">
							<image class="user_img" :src="item.avatar_name"></image>
							<view style="display: flex; flex-direction: column;">
								<view class="username">{{item.username}}</view>
								<view class="create_time">{{item.create_time}}</view>
							</view>
						</view>
					</view>
				</template>

				<template v-slot:right="{rightList}">
					<view class="waterbox"  v-for="(item, index) in rightList" :key="index">
						<u-lazy-load threshold="-450" border-radius="0" :image="item.issue_imags" :index="index">
						</u-lazy-load>
						<view class="content">
							{{item.content}}
						</view>
						<view class="user">
							<image class="user_img" :src="item.avatar_name"></image>
							<view style="display: flex; flex-direction: column;">
								<view class="username">{{item.username}}</view>
								<view class="create_time">{{item.create_time}}</view>
								<!-- <u-count-down ref="uCountDown" :timestamp="item.create_time" :autoplay="false"></u-count-down> -->
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
			<u-loadmore @click="clichload()" bg-color="rgb(240, 240, 240)" ref="load" :status="loadStatus" @loadmore="addRandomData(page)">
			</u-loadmore>
			
			
		</view>
	</g-page>

</template>

<script>
	import {
		getDynamicsApi
	} from "@api"
	export default {
		name: "dynamics",
		data() {
			return {
				imageUrl: null,
				loadStatus: 'loadmore',
				flowList: [],
				search: '',
				kiuse: true,
				page: 0,
				size: 5,
				list: []
			}
		},
		onLoad() {
			let that = this;
			that.imageUrl = that.$t.URL.image;
			this.addRandomData(this.page);

		},
		onReachBottom: function() { //当划到最底部的时候触发事件
			console.log("我是有底线的人");
			let that = this;
			console.log("onReachBottom", that.loadStatus);
			that.page += 1;
			if (that.loadStatus == 'loadmore') {
				that.loadStatus = 'loading';
				setTimeout(() => {
					that.addRandomData(that.page);
					that.loadStatus = 'loadmore';
				}, 1000);
			}
		},
		//下拉刷新显示提示语
		onPullDownRefresh: function() {

			let that = this;
			console.log("onReachBottom", that.loadStatus);
			that.page += 1;
			if (that.loadStatus == 'loadmore') {
				that.loadStatus = 'loading';
				setTimeout(() => {
					that.addRandomData(that.page);
					that.loadStatus = 'loadmore';
				}, 1000);
			}
		},
		methods: {
			async addRandomData(page) {
				let that = this;
				let data = [];
				await getDynamicsApi({
					page: page,
					size: that.size
				}).then(res => {
					data = res;
				})
				console.log("data.length", data.length < that.size);
				if (data.length < that.size)
					that.loadStatus = 'nomore';

				if (page == 0)
					that.list = data;
				else
					that.list = that.list.concat(data);
				for (let i = 0; i < that.list.length; i++) {
					let index = i;
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(that.list[index]));
					item.id = that.$u.guid();
					item.create_time = this.$u.timeFrom(item.create_time, false);
					item.issue_imags = this.$t.getImageUrl(item.issue_imags);
					item.avatar_name = this.$t.getImageUrl(item.avatar_name);
					that.flowList.push(item);
				}
			},
			clichload:function(){
				let that = this;
				console.log("onReachBottom", that.loadStatus);
				that.page += 1;
				if (that.loadStatus == 'loadmore') {
					that.loadStatus = 'loading';
					setTimeout(() => {
						that.addRandomData(that.page);
						that.loadStatus = 'loadmore';
					}, 1000);
				}
			}
		}

	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(234, 234, 234);
	}

	.sear {
		padding: 10upx;
		width: 100%;
		height: 84upx;
		background: #FFFFFF;
	}

	.waterbox {
		border-radius: 10upx;
		margin: 16upx 20upx;
		background-color: #ffffff;
		position: relative;
		overflow: hidden;
	}

	.image {
		width: 100%;
		border-radius: 4upx;
	}

	.content {
		text-align: left;
		padding: 10upx 20upx;
		font-size: 30upx
	}

	.user {
		display: flex;
	}

	.user_img {
		width: 80upx;
		height: 80upx;
		border-radius: 100%;
		margin: 10upx 20upx 20upx 20upx;
	}

	.username {
		line-height: 60upx;
		font-size: 34upx;
	}

	.create_time {
		line-height: 30upx;
		font-size: 28upx;
		color: #9d9d9d;
	}
</style>
